<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{shared/header(Mytitle='收藏')}"/>
<body class="bg-gray-100 font-sans flex flex-col min-h-screen">
    <nav th:replace="~{shared/nav}"/>
    <div th:replace="~{shared/modal}"/>
    <div id="container" class="flex flex-wrap h-screen pt-28 pl-5">
        <h1 th:if="${#lists.isEmpty(imageList)}">暂无图片，快去收藏吧！</h1>
        <div th:each="imageVO : ${imageList}" class="m-2 text-center">
            <img th:src="'data:image/jpeg;base64,' + ${imageVO.base64}" alt="Image" width="200" class="rounded shadow"/>
            <button th:id="${imageVO.id}" class="bg-red-500 text-white px-2 py-1 rounded mt-2" onclick="showEnsureModal(this)">删除</button>
        </div>
    </div>
    <div id="ensureModal" class="fixed inset-0 z-50 overflow-auto bg-gray-800 bg-opacity-50 hidden">
        <div class="flex items-center justify-center min-h-screen">
            <div class="bg-white rounded-lg p-8">
                <h2 id="modelTitle" class="text-xl font-bold mb-4">Modal Title</h2>
                <p id="mContent" class="text-gray-700"></p>
                <button onclick="removeImage();closeMyModal()" id="removeChat"
                        class="mt-4 px-4 py-2 bg-red-400 text-white rounded hover:bg-red-500">确定
                </button>
                <button onclick="closeMyModal()" id="closeModal"
                        class="mt-4 px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">取消
                </button>
            </div>
        </div>
    </div>
    <input type="hidden" id="deleteImageUrl" th:value="@{/image/deleteImage}"/>
    <footer th:replace="~{shared/footer}"/>
</body>
</html>
<script th::inline="javascript">
    let ImageId = -1;
    function showEnsureModal(target) {
        ImageId = target.getAttribute('id')
        console.log("ImageId:"+ImageId)
        $('#mContent').text("该图片Id:"+ImageId);
        $('#modelTitle').text('是否要删除该图片？')
        $('#ensureModal').removeClass('hidden');
    }

    function closeMyModal() {
        $('#ensureModal').addClass('hidden')
    }

    function removeImage() {
        $.ajax({
            type: 'POST',
            url: $('#deleteImageUrl').val(),
            data: {
                imageId: ImageId
            },
            success: response => {
                if(response.result) {
                    showModal('结果',response.message,'success')
                }
                else {
                    showModal('结果',response.message,'error')
                }
                $('#container').load(window.location.href = '#container',resolve => {
                    resolve()
                })
            }
        })
    }
</script>

